<template>
    <!-- 案例展示 -->
    <div class="boxs margin_top">
        <headers></headers>
        <div class="detail" :class="!ismobile ? 'pce' : 'mobe'">
            <!-- <div class="title">Detailed explanation of anti-counterfeiting traceability label scheme</div>
            <div class="title">防伪追溯标签方案详解</div> -->
            <div class="content">
                <div v-html="detail.description"></div>
            </div>
            <!-- <div class="dianzan">
                <div>
                    <span class="iconfont icon-hezuoshangjia"></span>
                    <span>12</span>
                </div>
                <div>
                    <span class="iconfont icon-zhengyan"></span>
                    <span>12</span>
                </div>
            </div> -->
        </div>
        <bottoms></bottoms>
    </div>
</template>

<script>


import bottoms from "./modle/bottoms.vue"
import headers from "./modle/headers.vue"
import titleline from "./modle/titleline.vue"

export default {
    name: 'HelloWorld',
    components: {
        headers,
        bottoms,
        titleline
    },
    data() {
        return {
            detail: "",
            ismobile: ""
        }
    },
    methods: {
        getdetail() {
            this.$api.get(
                "/api/PortalHome/get_tool_details",
                {
                    tools_id: this.$route.query.id
                },
                (r) => {
                    this.detail = r.DATA
                },
                (f) => { }
            );
        },
    },
    mounted() {
        this.getdetail()
        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
/deep/.content img {
    width: 100%;
    height: auto;
}

.title {
    font-size: 1.3rem;
    text-align: center;
    color: #009aff;
    padding: 0 2rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

.dianzan {
    width: 100%;
    overflow: hidden;
    padding-right: 1rem;
    color: rgb(81, 81, 81);

    >div {
        float: right;
        margin-left: 0.9rem;

        >span:nth-child(1) {
            font-size: 1.2rem;
        }

        >span:nth-child(2) {
            font-size: 1.1rem;
        }
    }

    >div:nth-child(1) {
        >span:nth-child(1) {
            font-size: 1.1rem;
        }
    }
}

.mobe {
    margin-top: 2rem;
}

.pce {
    margin-top: 2rem;
    width: 1000px;
    margin: 0 auto;
    margin-top: 15rem;
    margin-bottom: 2rem;

    .content {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .title {
        font-size: 1.6rem;
    }

    .dianzan {
        padding-right: 0rem;

        >div {
            float: right;
            margin-left: 0.9rem;

            >span:nth-child(1) {
                font-size: 1.5rem;
            }

            >span:nth-child(2) {
                font-size: 1.4rem;
            }
        }

        >div:nth-child(1) {
            >span:nth-child(1) {
                font-size: 1.3rem;
            }
        }
    }

}
</style>
